<template>
    <div :class="isCenter ? 'text-center' : ''">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
    </div>
</template>

<script>
    export default {
        name: 'Pagination',

        props: {
            // 当前页
            currentPage: {
                type: Number,
                default: 1
            },

            // 每页显示多少条数据
            pageSize: {
                type: Number,
                default: 20
            },

            // 数据总数多少条
            total: {
                type: Number,
                default: 0
            },

            // 每页显示个数选择器的选项设置
            pageSizes: {
                type: new Array(),
                default: () => {
                    return [10, 20, 50, 100, 200]
                }
            },

            // 是否居中
            isCenter: {
                type: Boolean,
                default: true
            },
        },

        methods: {
            // pageSize 改变时的回调
            handleSizeChange(val) {
                this.$emit('handleSizeChange', val)
            },

            // currentPage 改变时的回调
            handleCurrentChange(val) {
                this.$emit('handleCurrentChange', val)
            }
        },
    }
</script>